import { useRef, useEffect } from 'react';

function Editing ({ todo }) {
  const ref = useRef(null);
  const { title, isEditing, changeTitle } = todo;

  useEffect(() => {
    if (isEditing) {
      ref.current.focus();
    }
  }, [isEditing]);

  return (
    <input
      ref={ref}
      className="edit"
      defaultValue={title}
      onBlur={() => changeTitle(ref.current.value)}
    />
  );
}

export default Editing;